import React from 'react'
import {Row, Col, Button } from 'antd';
import YearPicker from '../YearPicker'
import './index.less'

export default class YearPickerRange extends React.PureComponent{
  constructor(props) {
    super(props);
    this.state = {
      range: props.range,
      isopen: false,
      mode: props.mode || 'year',
      popPositionLeft: true,
      value:  props.value || []
    }
  }

  componentDidMount() {
    document.removeEventListener('click', this.func, false);
    document.addEventListener('click', this.func, false)
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.func, false)
  }

  // 设置不可以选择的日期
  isDisabled = (year) => {
    // 如果没有时间限制，则左边的日期可以随便选
    if (!this.state.range[0]) {
      return this.state.value[1] && this.state.value[1] < year || (this.state.range[1] && this.state.range[1] < year)
    } else {
      // 如果有限制的时候，选择方式
      return (this.state.value[1] && this.state.value[1] < year) ||
      (this.state.range[0] ? this.state.range[0] > year : false) ||
      (this.state.range[1] && this.state.range[1] < year)
    }
  }

  // 设置不可以选择的日期
  isDisabled2 = (year) => {
    // 如果没有时间限制，则右边的日期可以随便选
    if (!this.state.range[1]) {
      return this.state.value[0] && this.state.value[0] > year || (this.state.range[0] && this.state.range[0] > year)
    }

    return (this.state.value[0] && this.state.value[0] > year) ||
    (this.state.range[1] ? this.state.range[1] < year : false) || (this.state.range[0] && this.state.range[0] > year);
  }

  // 关闭弹窗相关事件
  func = () => {
    this.props.closePop();
  }

  closePop = () => {
    this.props.closePop();
  }

  // 确认选择的日期
  handleSure = () => {
    this.props.handleSure(this.state.value)
  }

  onDateChange1 = (val) => {
    this.setState({
      value: [val, this.state.value[1]]
    })
  }

  onDateChange2 = (val) => {
    this.setState({
      value: [this.state.value[0], val]
    })
  }

  // 阻止冒泡
  preventDefaultOpen = (event) => {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
  }

  render() {
    const { popPositionLeft  } = this.props;
    return (<Row className="pop"
      onClick={this.preventDefaultOpen}
      style={{left: popPositionLeft? '0': 'auto',
        right:  popPositionLeft? 'auto': '0'}}
    >
      <Row>
        <Col span={8}><input readOnly
          value={this.state.value[0]}
        /></Col>
        <Col span={4}>~</Col>
        <Col span={8}><input readOnly
          value={this.state.value[1]}
        /></Col>
      </Row>
      <Row>
        <Col span={12}>
          <YearPicker
            disabledDate={this.isDisabled}
            onDateChange={this.onDateChange1.bind(this)}
            value={this.state.value[0] || ''}>
          </YearPicker>
        </Col>
        <Col span={12}>
          <YearPicker
            disabledDate={this.isDisabled2}
            onDateChange={this.onDateChange2.bind(this)}
            value={this.state.value[1] || ''}>
          </YearPicker>
        </Col>
      </Row>
      <Row style={{borderTop: '1px solid #ccc', lineHeight: '40px'}}>
        <Button onClick={this.handleSure}
          size="small"
          style={{marginLeft: '10px'}}
        >确认</Button>
      </Row>
    </Row>
    )
  }
}